<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">岗位管理</text>
      
    </view>
    
    <!-- 搜索过滤区 -->
    <view class="search-filter">
      <view class="search-bar">
        <uni-icons type="search" size="18" color="#909399" class="search-icon"></uni-icons>
        <input 
          type="text" 
          placeholder="搜索岗位名称、编号" 
          v-model="searchKey"
          @input="filterJobs"
          class="search-input"
        >
		<button class="action-btn add-btn" @click="showModal = true,isEdit=false">
		  <uni-icons type="plus" size="18" color="#fff"></uni-icons>
		  <text>添加岗位</text>
		</button>
      </view>
      

    </view>
    
    <!-- 岗位列表 -->
    <view class="job-list">
      <view class="job-card card-animation" v-for="job in filteredJobs" :key="job.post_id" @click="showEditModal(job)" >
     
        <view class="job-info">
          <view class="info-item">
            <text class="info-label">岗位:</text>
            <text class="info-value">{{job.post_name }}</text>
          </view>
          
          <view class="info-item">
            <text class="info-label">排序:</text>
            <text class="info-value">{{ job.post_sort }}</text>
          </view>
          
        <!--  <view class="info-item">
            <text class="info-label">创建时间:</text>
            <text class="info-value">{{ job.create_time }}</text>
          </view> -->
		  <view class="info-item">
		    <text class="info-label">岗位编号:</text>
		    <text class="info-value">{{ job.post_code }}</text>
		  </view>

        </view>
        
        <view class="job-footer">
          <text class="job-status" :class="job.status == 0 ?'status-active':'status-inactive'">
            {{ job.status == 0 ? '启用' : '禁用' }}
          </text>
          
          <view class="job-actions">
            <button class="action-btn small edit-btn" @click.stop.prevent="showEditModal(job)">
			  <u-icon name="edit-pen" size="36" color="#409EFF"></u-icon>
            </button>
            <button class="action-btn small delete-btn" @click.stop.prevent="showDeleteConfirm(job)">
              <uni-icons type="trash" size="16" color="#F56C6C"></uni-icons>
            </button>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredJobs.length === 0">
        <uni-icons type="empty" size="80" color="#C0C4CC"></uni-icons>
        <text class="empty-text">暂无岗位数据</text>
        <button class="action-btn add-btn" @click="showAddModal = true">
          <uni-icons type="plus" size="16" color="#fff"></uni-icons>
          <text>添加岗位</text>
        </button>
      </view>
    </view>
    
    <!-- 分页控件 -->
    <view class="pagination" v-if="totalPages > 1">
      <button class="page-btn" :class="{ disabled: currentPage === 1 }" @click="goToPage(1)">
        <uni-icons type="arrowleft" size="16"></uni-icons>
      </button>
      
      <button 
        class="page-btn" 
        v-for="page in pageNumbers" 
        :key="page" 
        :class="{ active: page === currentPage }"
        @click="goToPage(page)"
      >
        {{ page }}
      </button>
      
      <button class="page-btn" :class="{ disabled: currentPage === totalPages }" @click="goToPage(totalPages)">
        <uni-icons type="arrowright" size="16"></uni-icons>
      </button>
    </view>
    
    <!-- 添加/编辑岗位模态框 -->
    <view v-if="showModal" class="modal-overlay">
      <view class="modal-container">
        <view class="modal-header">
          <text class="modal-title">{{ isEdit ? '编辑岗位' : '添加岗位' }}</text>
          <view class="close-btn" @click="showModal = false">
            <uni-icons type="close" size="20" color="#909399"></uni-icons>
          </view>
        </view>
        
        <view class="modal-form">
          <view class="form-group">
            <label class="form-label">岗位名称 <text class="required">*</text></label>
            <input 
              type="text" 
              v-model="form.post_name" 
              placeholder="请输入岗位名称"
              class="form-input"
              :class="{ 'input-error': errors.post_name }"
            >
            <text class="error-message" v-if="errors.post_name">{{ errors.post_name }}</text>
          </view>
          
          <view class="form-group">
            <label class="form-label">岗位编号 <text class="required">*</text></label>
            <input 
              type="text" 
              v-model="form.post_code" 
              placeholder="请输入岗位编号"
              class="form-input"
              :class="{ 'input-error': errors.post_code }"
            >
            <text class="error-message" v-if="errors.post_code">{{ errors.post_code }}</text>
          </view>
                   
          <view class="form-group">
            <label class="form-label">岗位状态 <text class="required">*</text></label>
            <view class="status-radio-group">
              <view 
                class="status-radio-item" 
                v-for="(item, index) in statusOptions" 
                :key="index"
                :class="{ active: form.status === item.value }"
                @click="form.status = item.value"
              >
                {{ item.label }}
              </view>
            </view>
            <text class="error-message" v-if="errors.status">{{ errors.status }}</text>
          </view>
          
          <view class="form-group">
            <label class="form-label">岗位描述</label>
            <textarea 
              v-model="form.remark" 
              placeholder="请输入岗位描述" 
              class="form-textarea"
              maxlength="500"
            ></textarea>
          </view>
        </view>
        
        <view class="confirm-actions">
          <button style="justify-content: center;" class="action-btn cancel-btn" @click="showModal = false">取消</button>
          <button style="justify-content: center;" class="action-btn confirm-btn" @click="submitForm">确认</button>
        </view>
      </view>
    </view>
    
    <!-- 删除确认弹窗 -->
    <view v-if="showDeleteModal" class="delete-confirm-overlay">
      <view class="delete-confirm-container">
        <view style="text-align: center;padding: 35rpx 0;">
		  <text class="confirm-title">确认删除</text>
        </view>
        <text class="confirm-message">你确定要删除该岗位吗？此操作不可恢复。</text>
        <view class="confirm-actions" style="margin-top: 35rpx;">
          <button style="justify-content: center;" class="action-btn cancel-btn" @click="showDeleteModal = false">取消</button>
          <button style="justify-content: center;" class="action-btn confirm-btn" @click="deleteJob">确认删除</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      jobs: [], // 岗位数据
	  filteredJobs:[],
      searchKey: '', // 搜索关键词
      filter: {
        status: '',
        department: ''
      }, // 过滤条件
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      totalPages: 1, // 总页数

      statusOptions: [ // 状态选项
        { value: 0, label: '启用' },
        { value: 1, label: '禁用' }
      ],
      showModal: false, // 添加/编辑模态框显示状态
      isEdit: false, // 是否编辑模式
      form: { // 岗位表单数据
        post_name: '',
		post_code: '',
		post_sort: 0,
		status: 0,
		remark:''
      },
      errors: {}, // 表单错误信息
      showDeleteModal: false, // 删除确认弹窗显示状态
      jobToDelete: null, // 待删除的岗位ID
    }
  },
  onLoad() {
    // 加载岗位数据
    this.loadJobs();
  },
  computed: {
   
    // 页码列表
    pageNumbers() {
      const numbers = [];
      const start = Math.max(1, this.currentPage - 2);
      const end = Math.min(this.totalPages, start + 4);
      
      for (let i = start; i <= end; i++) {
        numbers.push(i);
      }
      
      return numbers;
    }
  },
  onLoad() {
  	this.getPost()
  },
  methods: {
	async getPost () {
		const res = await this.$api.get('/Post/index',{post_name:this.searchKey, page:this.currentPage,limit:this.pageSize},true)
		if(res.data.code === 200) {
			this.filteredJobs = res.data.data
		}
	},

    // 过滤岗位
    filterJobs() {
      this.currentPage = 1;
	  this.getPost()
    },
    // 切换过滤条件
    toggleFilter(type, value) {
      this.filter[type] = value;
      this[currentPage === 1 ? 'filterJobs' : 'goToPage'](1);
      
      // 关闭下拉过滤菜单
      this.filter[type] = value ? value : false;
    },
    // 前往指定页面
    goToPage(page) {
      if (page < 1 || page > this.totalPages) return;
      this.currentPage = page;
    },
    // 获取部门名称
    getDepartmentName(code) {
      const dept = this.departments.find(d => d.value === code);
      return dept ? dept.label : '未知部门';
    },
    // 显示添加模态框
    showAddModal() {
      this.isEdit = false;
      this.resetForm();
      this.showModal = true;
    },
    // 显示编辑模态框
    showEditModal(job) {
      this.isEdit = true;
      this.resetForm();
      
      // 填充表单数据
      this.form = job;
      this.showModal = true;
    },
    // 重置表单
    resetForm() {
      this.form = {
        post_name: '',
        post_code: '',
        post_sort: 0,
        status: 0,
		remark:''
      };
      this.errors = {};
    },
    // 验证表单
    validateForm() {
      const errors = {};
      
      if (!this.form.post_name) {
        errors.post_name = '请输入岗位名称';
      }
      
      if (!this.form.post_code) {
        errors.post_code = '请输入岗位编号';
      }
      return errors;
    },
    // 提交表单
    async submitForm() {
      this.errors = this.validateForm();
      
      if (Object.keys(this.errors).length > 0) {
        return;
      }
      const res = await this.$api.post('/post/save',this.form,true)
	  if(res.data.code == 200) {
		  this.showModal = false;
		  this.currentPage = 1
		  this.getPost()
		  this.resetForm();
	  }
    },
    // 显示删除确认
    showDeleteConfirm(job) {
      this.jobToDelete = job;
      this.showDeleteModal = true;
    },
    // 删除岗位
    async deleteJob() {
      const res = await this.$api.post('/Post/delete',{post_id:this.jobToDelete.post_id},true)
	  if(res.data.code === 200) {
		  this.showDeleteModal = false
		  this.getPost()
	  }
    },
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
}
</script>

<style lang="scss" scoped>
/* 基础布局 */

</style>